<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>填写航线信息</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="EXTENT_PATH/css/style.css"/>
<link rel="stylesheet" type="text/css" href="EXTENT_PATH/css/pulicstyle.css"/>
<script type="text/javascript" src="EXTENT_PATH/js/jquery.js"></script>
<script type="text/javascript" src="EXTENT_PATH/js/jquery.form.js"></script>
<style type="text/css">
.inputindexSmail {
	display: inline-block;
	color: #8f8f8f;
	font-size: 12px;
	font-family: Arial, sans-serif;
	padding: 6px 10px;
	border-width: 1px;
	border-style: solid;
	border-color: #d8d8d8;
	background-color: #f3f3f3;
	line-height: 1em;
	width: 200px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	font-size: 30px;
	font-family: Georgia, "Times New Roman", Times, serif;
}
</style>
<script type="text/javascript">
window.onload = function() {
	var verifyObj = document.getElementById("Verify");
	verifyObj.onclick = function() {
		this.src = "VerifyCodeServlet";
	};
}
$(document).ready(function() {
	$(function(){ 
		$('#lineType').trigger("change");
	 });
	var flag=2;//等2说明还没选类型，等0说明选了具体日期，等于1说明选了时间段
	var rfromCity=false;
	var rtoCity=false;
	var rprice=false;
	var rVerifyCode=false;
	var rlineType=false;
	$("#lineType").change(function() {
		var juti="<td  height='30' colspan='2' id='juti1'>"+
					"<div align='right'>"+
						"<STRONG>日期</STRONG>&nbsp;&nbsp; "+
					"</div>"+
					 "</td>"+
					 "<td align='left' id='juti2'>"+
					 	"<input id='data1' name='fDate' type='text' class='inputindex' maxlength='20' id='price'>格式(2013-10-10)"+
				"</td>";
		var duan="<td  height='30' colspan='2'id='duan1'>"+
					"<div align='right'>"+
						"<STRONG>日期</STRONG>&nbsp;&nbsp; "+
					"</div>"+
					 "</td>"+
					 "<td align='left' id='duan2'>"+
					 	"从<input id='data1' name='fDate' type='text' class='inputindexSmail' maxlength='20' id='price'>"+
					 	"至<input id='data2' name='toDate' type='text' class='inputindexSmail' maxlength='20' id='price'>格式(2013-10-10)"+
				"</td>";
		var t=$("#selectType");//td
		var type = $("#lineType").val();//类型
		
		if(type==0){//具体日期
			$("#lineType_notice").html("");
			if(flag==2){
				//还没选
				t.append(juti);
				flag=0;
			}else if(flag==1){
				//选了时间段
				$("#duan1").remove();
				$("#duan2").remove();
				t.append(juti);
				flag=0;
			}
			
		}else if(type==1){
			$("#lineType_notice").html("");
			if(flag==2){
				//还没选
				
				t.append(duan);
				flag=1;
			}else if(flag==0){
				//选了具体日期
				
				$("#juti1").remove();
				$("#juti2").remove();
				t.append(duan);
				flag=1;
			}
		}
		
	
	
});
$("#fromCity").blur(function checkfromCity() {
	var fromCity = $("#fromCity").val();
	if (fromCity == '') {
		$("#fromCity_notice").html("请填写出发城市");
		rfromCity=false;
	} else {
		$("#fromCity_notice").html("<font color='blue'>√</font>");
		rfromCity=true;
	}

});
		
$("#toCity").blur(function checkToCity() {
	var toCity = $("#toCity").val();
	if (toCity == '') {
		$("#toCity_notice").html("请填写目的城市");
		rtoCity=false;
	} else {
		$("#toCity_notice").html("<font color='blue'>√</font>");
		rtoCity=true;
	}
});
$("#price").blur(function checkPrice() {
	var price = $("#price").val();
	if(price==''){
		$("#price_notice").html("请填写价格");
		rprice=false;
	}else if(isNaN(price)){
		$("#price_notice").text("请填写数字");
		rprice=false;
	}else{
		$("#price_notice").html("<font color='blue'>√</font>");
		rprice=true;
	}
});
$("#VerifyCode").blur(function checkVf() {
	var code = document.getElementById("VerifyCode").value;
	if (code == "") {
		document.getElementById('VerifyCode_notice').innerHTML = "<span style='COLOR:#ff0000'>*请输入验证码</span>";
		rVerifyCodef=false;
	} else {
		$.ajax({
			type : "get",
			url : "CheckVerifycode",
			data : "code=" + code,
			success : function(data) {
				if (data == 0) {
					$("#VerifyCode_notice").html("<font color='blue'>√</font>");
					rVerifyCode=true;
					return true;
				} else if (data == 1) {
					$("#VerifyCode_notice").html("<font color='red'>验证码输入错误!</font>");
					rVerifyCodef=false;
					return false;
				}
			},
			beforeSend : function() {
				$("#VerifyCode_notice").html("<img  src='EXTENT_PATH/images/loading.gif'>验证中.....");
			}

		});
	}
});
$("#submitLine").click(function(){
	var  fromCity=$("#fromCity").val();
	var  toCity=$("#toCity").val();
	var  lineType=$("#lineType").val();
	var  price=$("#price").val();
	var  VerifyCode=$("#VerifyCode").val();
	if(flag==2){
	//还没选择类型
		$("#lineType_notice").html("<font color='red'>请选择!</font>");
		$("#lineType").focus();
	}
	if(flag!=2){
		if(flag==0){
			var data1=$("#data1").val();
			var r = data1.match(/((^((1[8-9]\d{2})|([2-9]\d{3}))(-)(10|12|0?[13578])(-)(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))(-)(11|0?[469])(-)(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))(-)(0?2)(-)(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)(-)(0?2)(-)(29)$)|(^([3579][26]00)(-)(0?2)(-)(29)$)|(^([1][89][0][48])(-)(0?2)(-)(29)$)|(^([2-9][0-9][0][48])(-)(0?2)(-)(29)$)|(^([1][89][2468][048])(-)(0?2)(-)(29)$)|(^([2-9][0-9][2468][048])(-)(0?2)(-)(29)$)|(^([1][89][13579][26])(-)(0?2)(-)(29)$)|(^([2-9][0-9][13579][26])(-)(0?2)(-)(29)$))/); 
			if(r!=null){
				$("#lineType_notice").html("<font color='blue'>√</font>");
				rlineType=true;
			}else{
				$("#lineType_notice").html("<font color='red'>请填写正确日期!</font>");
			}		
		
		}else if(flag==1){
			var data1=$("#data1").val();
			var data2=$("#data2").val();
			var r1 = data1.match(/((^((1[8-9]\d{2})|([2-9]\d{3}))(-)(10|12|0?[13578])(-)(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))(-)(11|0?[469])(-)(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))(-)(0?2)(-)(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)(-)(0?2)(-)(29)$)|(^([3579][26]00)(-)(0?2)(-)(29)$)|(^([1][89][0][48])(-)(0?2)(-)(29)$)|(^([2-9][0-9][0][48])(-)(0?2)(-)(29)$)|(^([1][89][2468][048])(-)(0?2)(-)(29)$)|(^([2-9][0-9][2468][048])(-)(0?2)(-)(29)$)|(^([1][89][13579][26])(-)(0?2)(-)(29)$)|(^([2-9][0-9][13579][26])(-)(0?2)(-)(29)$))/); 
			var r2 = data2.match(/((^((1[8-9]\d{2})|([2-9]\d{3}))(-)(10|12|0?[13578])(-)(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))(-)(11|0?[469])(-)(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))(-)(0?2)(-)(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)(-)(0?2)(-)(29)$)|(^([3579][26]00)(-)(0?2)(-)(29)$)|(^([1][89][0][48])(-)(0?2)(-)(29)$)|(^([2-9][0-9][0][48])(-)(0?2)(-)(29)$)|(^([1][89][2468][048])(-)(0?2)(-)(29)$)|(^([2-9][0-9][2468][048])(-)(0?2)(-)(29)$)|(^([1][89][13579][26])(-)(0?2)(-)(29)$)|(^([2-9][0-9][13579][26])(-)(0?2)(-)(29)$))/); 
			if(r1!=null && r2!=null){
				$("#lineType_notice").html("<font color='blue'>√!</font>");
				rlineType=true;
			}
			else{
				$("#lineType_notice").html("<font color='red'>请填写正确日期!</font>");
				
			}
		}
	}if(fromCity==''){
		$("#fromCity_notice").html("<font color='red'>请填写!</font>");
		$("#fromCity").focus();
	}if(toCity==''){
		$("#toCity_notice").html("<font color='red'>请填写!</font>");
		$("#toCity").focus();
	}if(lineType==''){
		$("#toCity_notice").html("<font color='red'>请填写!</font>");
		$("#lineType").focus();
	}if(price==''){
		$("#price_notice").html("<font color='red'>请填写!</font>");
		$("#price").focus();
		
	}if(VerifyCode==''){
		$("#VerifyCode_notice").html("<font color='red'>验证码输入错误!</font>");
		$("#VerifyCode").focus();
	}
	if(!rfromCity){
		$("#fromCity").focus();
		checkfromCity();
	}
	if(!rtoCity){
		$("#toCity").focus();
		checkToCity();
	}
	if(!rprice){
		$("#price").focus();
		checkPrice();
	}
	
	if(!rVerifyCode){
		$("#VerifyCode").focus();
		checkVf();
	}
	if(rfromCity && rtoCity && rVerifyCode && rlineType && rprice){
		$("#orderLine").attr("action", "makeline/MakeLine");
		$("#orderLine").submit();
	}
	
	
});
	
});
</script>
</head>
<body>
	<jsp:include page="common/top.jsp"></jsp:include>
	<div id="wrapper">
		<FORM id="orderLine" name="orderLine" action="" method="post">
			<center>
				<STRONG><h1>
						<font color="red">${requestScope.msg}</font>
					</h1>
					</h1>
				</STRONG>
				<center>
					<STRONG><h1>请填写你要监测的航线</h1>
					</STRONG>
				</center>
				<TABLE width="50%" align=center border=0>
					<tr>
						<td width="20%" height="30" colspan="2">
							<div align="right">
								<STRONG>出发城市</STRONG>&nbsp;&nbsp;

							</div></td>
						<td align="left" width="80%"><input class="inputindex"
							id="fromCity" name="fromCity" type="text" maxlength="10">
							<SPAN id="fromCity_notice" style='COLOR:#ff0000'>*</SPAN></td>
					</tr>
					<tr>
						<td height="30" colspan="2">
							<div align="right">
								<STRONG>目的城市</STRONG>&nbsp;&nbsp;

							</div></td>
						<td align="left"><input name="toCity" id="toCity" type="text"
							class="inputindex" maxlength="10"> <SPAN
							id="toCity_notice" style='COLOR:#ff0000'>*</SPAN></td>
					</tr>
					<tr>
						<td height="30" colspan="2">
							<div align="right">
								<STRONG>检测类型</STRONG>&nbsp;&nbsp;

							</div></td>
						<td align="left"><select id="lineType" name="lineType">
								<option value="0" id="jutirq" >具体日期
								<option value="1">某个时间段
						</select> <SPAN id="lineType_notice" style='COLOR:#ff0000'>*</SPAN></td>

					</tr>
					<tr id="selectType">

					</tr>
					<tr>
						<td colspan="2" align="right">
							<div align="right">
								<STRONG>期望价</STRONG>&nbsp;&nbsp;
							</div></td>
						<td align="left"><input name="price" type="text"
							class="inputindex" maxlength="4" id="price"><STRONG>以下(整数)</STRONG>
							<SPAN id="price_notice" style='COLOR:#ff0000'>*</SPAN></td>
					</tr>
					<tr>
						<td colspan="2" align="right">
							<div align="right">
								<STRONG>验证码</STRONG>&nbsp;&nbsp;
							</div></td>
						<td align="left"><input type="text" id="VerifyCode" size="3"
							name="vf" class="inputindex" onblur="checkVerify()"> <img
							src="VerifyCodeServlet" id="Verify" style="cursor: hand;"
							alt="看不清，换一张" /> <SPAN id="VerifyCode_notice"><font
								color="red">*</font>
						</SPAN></td>
					</tr>


					<tr>
						<td colspan="2" align="right">
							<div align="right">
								<STRONG></STRONG>&nbsp;&nbsp;
							</div></td>
						<TD align="center">
							<center>
								<input type=button value=确认&nbsp;&nbsp;&nbsp; id="submitLine">
							</center></TD>
					</tr>
				</table>
			</center>
		</FORM>
	</div>

</body>
</html>
